<!DOCTYPE html>
<html lang="en">
<html lang="en" xmlns:th="http://wwww.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta charset="UTF-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="../aaa/css/font.css">
    <link rel="stylesheet" href="../aaa/css/xadmin.css">
    <script src="../aaa/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../aaa/js/xadmin.js"></script>
    <script src="../aaa/js/jquery-3.1.1.js"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <div class="layui-form-item">
            <label  class="layui-form-label">
                <span class="x-red">*</span>包装名：
            </label>
            <div class="layui-input-inline">
                <input type="text" id="inp2" required="" lay-verify="required"
                       autocomplete="off" class="layui-input" />
            </div>
            <label class="layui-form-label">图片:</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline">
                    <img src="" alt="" id="selectImg" style="width: 80px;height: 80px">
                    <input type="file" id="inp3" onchange="xmTanUploadImg(this)" lay-verify="required">
                </div>
            </div>
            <label class="layui-form-label">
                <span class="x-red">*</span>发单日期
            </label>
            <div class="layui-input-inline">
                <input type="text" class="layui-input" id="inp4" placeholder="请选择日期" lay-verify="required" lay-key="1">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="x-red">*</span>负责人
            </label>
            <div class="layui-input-inline">
                <select id="inp5" class="layui-input" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:each="a:${emp}" th:value="${a.emp_id}" th:text="${a.emp_name}"></option>
                </select>
            </div>
            <label class="layui-form-label">
                <span class="x-red">*</span>包装公司
            </label>
            <div class="layui-input-inline">
                <select id="inp6" name="BsupId" class="layui-input" lay-verify="required">
                    <option value="">请选择</option>
                    <option th:each="a:${dis}" th:value="${a.BsupId}" th:text="${a.BsupName}"></option>
                </select>
            </div>
            <label class="layui-form-label">
                <span class="x-red">*</span>审核状态
            </label>
            <div class="layui-input-inline">
                <select id="inp7" class="layui-input" lay-verify="required"readonly="readonly">
                    <option value="1">未审核</option>
                </select>
            </div>
        </div>
        <center>
            <button  class="layui-btn layui-btn-radius" lay-filter="add" value="添加一行" style="width: 150px" onclick="addNode()">添加</button>
        </center>
</div>
</div>
<table cellpadding="0" cellspacing="0" border="0" id="data1" class="layui-table layui-form">
    <tbody id="tbody">
    <thead>
        <th>包装名</th>
        <th>图片</th>
        <th>发单日期</th>
        <th>负责人</th>
        <th>包装公司</th>
        <th>审核状态</th>
        <th>操作</th>
    </thead>
    <tbody>
</table>
<center>
    <button class="layui-btn layui-btn-radius" style="width: 150px" onclick="f()">提交</button>
</center>
</body>
<script src="../aaa/js/jquery-3.1.1.js"></script>
<script>
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    function xmTanUploadImg(obj) {
        document.getElementById("selectImg").src = window.URL.createObjectURL(obj.files[0]);
    }
    //批量添加
    function f() {
        var data = Array();
        var data1 = Array();
        var data2 = Array();
        var data3 = Array();
        var dataa = Array();
        var emplist = Array();
        $("span[name='needName']").each(function(){
            data.push($(this).text())
        });
        $("span[name='needimg']").each(function(){
            data1.push($("#selectImg").attr("src"))
        });
        $("span[name='needtime']").each(function(){
            data2.push($(this).text())
        });
        $("span[name='saadminid']").each(function(){
            data3.push($(this).text())
        });
        $("span[name='BsupId']").each(function(){
            dataa.push($(this).text())
        });
        var i = 0;
        $("span[name='statusid']").each(function() {
                emplist.push({
                    needName: data[i],
                    needimg: data1[i],
                    needtime: data2[i],
                    saadminid: data3[i],
                    BsupId: dataa[i],
                    statusid: $(this).text()
                }); i++
            }
        );
        $.ajax({
            //请求方式
            type: 'POST',
            //发送请求的地址
            url: '/need/addpiliang',
            //服务器返回的数据类型
            dataType: 'json',
            contentType:"application/json",
            //发送到服务器的数据，对象必须为key/value的格式，jquery会自动转换为字符串格式
            data: JSON.stringify(emplist),
            success: function (data) {
            }
        });
        layer.msg("添加成功", {
            icon: 6,
            time: 500
        }, function () {
            parent.window.location.reload();//重新页面
            // 获得frame索引
            var index = parent.layer.getFrameIndex(window.name);
            //关闭当前frame
            parent.layer.close(index);
        });
    }
    function addNode(){
        var inp2 = $("#inp2").val();
        var inp3 = $("#selectImg").attr("src");
        var inp4 = $("#inp4").val();
        var inp5 = $("#inp5").val();
        var inp6 = $("#inp6").val();
        var inp7 = $("#inp7").val();
        if (inp2=="" || inp3=="" || inp4=="" || inp5=="" || inp6=="" || inp7==""){
            alert("文本框不能为空")
        }else {
            var tr = "<tr>";
            tr = tr + "<td><span name='needName'>" + inp2 + "</span></td>";
            tr = tr + "<td><span name='needimg'><img id='aaa' style='width: 80px;height: 80px' src=" + inp3 + "></td>";
            tr = tr + "<td><span name='needtime'>" + inp4 + "</span></td>";
            tr = tr + "<td><span name='saadminid'>" + inp5 + "</span></td>";
            tr = tr + "<td><span name='BsupId'>" + inp6 + "</span></td>";
            tr = tr + "<td><span name='statusid'>" + inp7 + "</span></td>";
            tr = tr + "<td><button onclick='deleteNode(this)'>删除</button></td>";
            tr = tr + "</tr>";
            $("#tbody").append(tr);
        }
    }
    function deleteNode(){
        $("tr:last").remove();
    }
    function deleteNode(obj){
        $(obj).parent().parent().remove();
    }

    layui.use('laydate', function() {
        var laydate = layui.laydate;

        //执行一个laydate实例
        laydate.render({
            elem: '#inp4' //指定元素
        });
    });
</script>
</html>
